<template>
  <div :class="classes.login">
    <el-container>
      <el-main>
        <div :class="classes.content1">
          <div :class="classes.xtbt">{{myData.xtmc}}</div>
          <vxe-form
              ref="xForm"
              :data="myData.formData"
              :rules="myData.formRule"
              :loading="myData.loading"
              @submit="submitEvent">
            <vxe-form-item title="用户名" field="yhdm" :item-render="{}" span="24">
              <template #default="{ data }">
                <el-input v-model="data.yhdm" placeholder="请输入用户名" clearable prefix-icon="User"></el-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="密码" field="yhmm" :item-render="{}" span="24">
              <template #default="{ data }">
                <el-input v-model="data.yhmm" placeholder="请输入密码" clearable prefix-icon="Lock" type="password" show-password="true"></el-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="验证码" field="yzm" :item-render="{}" span="24" :visible="userStore.getNeedCaptcha">
              <template #default="{ data }">
                <el-input v-model="data.yzm" placeholder="请输入验证码" clearable prefix-icon="Pointer"></el-input>
              </template>
            </vxe-form-item>
            <vxe-form-item span="24" align="center" :visible="userStore.getNeedCaptcha">
              <template #default="{ data }">
                <div style="cursor: pointer;text-align: center;">
                  <img ref="img" :src="yzmSrc()" @click="sxyzm()"/>
                </div>
              </template>
            </vxe-form-item>
            <vxe-form-item align="center"  span="24">
              <template #default>
                <vxe-button content="忘记密码"></vxe-button>
                <vxe-button status="primary" content="登录" type="submit"></vxe-button>
              </template>
            </vxe-form-item>
          </vxe-form>
        </div>
      </el-main>
      <el-footer> @2021 </el-footer>
    </el-container>
    <Suspense>
      <vxe-modal transfer ref="xModal" v-model="myData.tcckShow" :title="myData.tcckProps.title" {{...myData.tcckProps}}
                 show-zoom resize>
        <MyForm ref="xUpdate" slots={{customSlots}} @click="fromClose"></MyForm>
      </vxe-modal>
    </Suspense>
  </div >
</template>

<script lang="ts" setup>
import classes from "./index.module.scss"
import axios from "@/axios";
import {nextTick, reactive, ref} from "vue";
import {useUserStore} from "@/store/modules/user";
import MyForm from "@/components/MyForm";
import customSlots from "@/slots"
const userStore = useUserStore();
const xModal = ref()
const xUpdate = ref();
const xForm = ref();
const img = ref();

const myData = reactive({
  xtmc: userStore.getCurrentSystemName,
  loading: false,
  tcckShow: false,
  tcckProps: {
    /**
     * 弹出窗口标题
     */
    title: "系统公告",
    width: "80%",
    height: "80%",
  },
  formData: {
    yhdm: "",
    yhmm: "",
    yzm:"",
    //获取用户详细信息，不传默认只返回基础信息
    model: "details"
  },
  formRule: {
    yhdm: [{ required: true, message: "请输入用户名" }],
    yhmm: [{ required: true, message: "请输入密码" }],
    yzm: [{ required: userStore.getNeedCaptcha, message: "请输入验证码" }],
  },
});

/**
 * 弹窗页面回调
 */
const fromClose = () => {
  myData.tcckShow = false
}
/**
 * @description: 登录表单提交
 * @return {*}
 */
const submitEvent = async () => {
  let query = {
    sjdx: {
      dxdm: "SYS_QX_YHXX_MRDL",
    },
    sys: {
      cllx: "yhdl",
    },
    yobj: myData.formData,
  }
  await userStore.login(query);
  //设置验证码
  xForm.value.rules.yzm[0].required= userStore.getNeedCaptcha;
  sxyzm();
};

const yzmSrc = () => {
  return axios.getBaseURL()+"/default/SYS_QX_YHXX_MRDL/scyzm?t="+new Date().getTime();
}
const sxyzm = () => {
  img.value.src = yzmSrc();
}

const ggcx = () => {
  axios.post({
    sys: { authCode: "QTQX_WDGL", cllx: "select" },
    yobj: { yxx: "1", sfsxjg: "0", lb: "01", ckwd: "1" }
  }).then((response) => {
    if (response.status && response.data.list.length > 0 && response.data.list[0].id) {
      axios.post({
        sys: {
          authCode: "QTQX_WDGL",
          cllx: "dxjcxx"
        },
      }).then(async res => {
        myData.tcckShow = true
        console.log(xUpdate.value)
        await nextTick()
        await nextTick()
        xUpdate.value.initPage(res.data, 'ggzs', null, { ggzs: response.data.list[0].id });
      })
    }
  })
}
ggcx()
</script>

<style scoped>

</style>